<template>
    <!-- 饼图容器 -->
    <div ref="chartRef" class="pieChart"></div>
</template>

<script setup>
// 引入 vue 相关方法
import { ref, onMounted, onUnmounted } from 'vue'
// 引入 echarts
import * as echarts from 'echarts'
// 引入防抖工具
import { debounce } from '@/tools/debounce.js'
// 引入样式
import '@/assets/chart.css'

const chartRef = ref(null) // 图表 DOM 引用
let myChart = null // echarts 实例
const windowWidth = ref(window.innerWidth) // 窗口宽度

// 饼图初始数据
const pieData = ref([
    { value: 335, name: '数据1' },
    { value: 310, name: '数据2' },
    { value: 234, name: '数据3' },
    { value: 135, name: '数据4' },
    { value: 154, name: '数据5' },
])

let intervalId = null // 定时器 id

onMounted(() => {
    // 只有容器有宽高时才初始化
    if (chartRef.value.clientWidth > 0 && chartRef.value.clientHeight > 0) {
        initChart()
        // 监听窗口大小变化，动态调整图表
        window.addEventListener('resize', debounce(() => windowWidth.value = window.innerWidth, 200))
        // 移动端自适应
        if (windowWidth.value < 768) {
            myChart.resize({
                width: 300,
                height: 300
            })
        }
        // 启动动态数据更新
        startDynamicUpdate()
    }
})

onUnmounted(() => {
    clearInterval(intervalId)
})

// 初始化饼图
function initChart() {
    myChart = echarts.init(chartRef.value)
    const chartOptions = ref({
        tooltip: {
            trigger: 'item',
        },
        legend: {
            left: 'left',
            data: pieData.value.map(item => item.name),
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: pieData.value,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
        ],
    })
    myChart.setOption(chartOptions.value)
}

// 启动定时器动态更新数据（模拟请求新数据）
function startDynamicUpdate() {
    intervalId = setInterval(() => {
        // 生成新的随机数据 // 更改成请求获取数据
        const newData = pieData.value.map(() => Math.floor(Math.random() * 1000))

        // 更新图表数据
        myChart.setOption({
            series: [
                {
                    data: [
                        { value: newData[0], name: '数据1' },
                        { value: newData[1], name: '数据2' },
                        { value: newData[2], name: '数据3' },
                        { value: newData[3], name: '数据4' },
                        { value: newData[4], name: '数据5' },
                    ],
                },
            ]
        })
    }, 10000) // 每隔10秒更新一次数据
}
</script>